@cms-color: #000000;
@cms-bg-color: #ffffff;
@cms-header-bg-color: #ffffff;
@cms-category-color: #fff;
//阳宗海网站定义--导航菜单背景色
// @cms-category-bg-color: #cb1220;
//渠成网站定义--导航菜单背景色
@cms-category-bg-color: #4d57a5;
@cms-category-swipper-color: #000;
@cms-category-swipper-bg-color: #fff;
@cms-content-bg-color: #fff;
@cms-footer-links-color: #fff;
//阳宗海网站定义--底部友情链接背景色
// @cms-footer-links-bg-color: #cb1220;
//渠成网站定义--底部友情链接背景色
@cms-footer-links-bg-color: #4d57a5;
@cms-footer-copyright-color: #666;
@cms-footer-copyright-bg-color: #fff;
//栏目标题前导符竖线颜色
@cms-category-title-prefix-color: #ff0000;
//栏目标题文字颜色
@cms-category-title-text-color: #000;

.cms-layout-page {
  @apply text-base; //text-base（字体大小：1rem;）

  color: @cms-color;
  background: @cms-bg-color;
}

.cms-full-screen-page {
  @apply w-full h-full;

  color: @cms-color;
  background: @cms-bg-color;
}

.cms-full-screen-toggle {
  position: absolute;
  top: 0;
  right: 0;
}

.logo {
  @apply absolute h-20 w-full; //20=5rem，使用fixed页面滚动时位置始终保持在左上角

  // background-image: url(@/../images/logo-ceic.jpg);
  // object-fit: scale-down;

  img {
    @apply h-full;

    // height: 100%;
    // width: auto;
    // object-fit: contain;
    // background-image: url(@/../images/logo-ceic.webp);
    // content: url('@/../images/logo-ceic.webp');//开发环境下正常，发布后图片路径中多了
    // content: url('@/images/logo-ceic.webp');//build报错
    // content: url('./../../../../images/logo-ceic.webp');
    // object-fit: scale-down;
  }
}

//头部中的系统标题样式
.cms-header-system-title {
  // @apply h-20 leading-20 font-semibold align-middle xl:text-xl lg:text-lg md:text-md sm:text-sm text-xs;
  @apply h-20 leading-20 font-semibold align-middle text-xl overflow-hidden;

  //字号使用响应式后垂直对齐失效，直接写样式也不行，样式有但显示不正常；在DOM元素上写style也同样无效
  // vertical-align: middle;
}

//头部中的标题栏右侧样式，显示导航和搜索
.cms-header-title-right {
  @apply h-10 leading-10 text-sm text-right py-1;

  //头部的收藏、管理后台文字添加鼠标移至和离开效果
  span {
    @apply cursor-pointer hover:text-red-700;
  }
}

//使用span显示链接的样式，鼠标移至显示手型，红色文字
.cms-span-link {
  @apply cursor-pointer hover:text-red-700;
}

//cms头部行，一整行宽度100%
.cms-layout-header-row {
  @apply text-xl h-20; //高度与logo一致

  color: @cms-color;
  // background: @cms-header-bg-color;
}

//cms头部的内容容器样式，实际用于显示logo、搜索栏的容器，设置背景色、左右边距
.cms-layout-header-content-container {
  @apply px-2;

  background: @cms-header-bg-color;
}

//cms头部的栏目行内容容器样式，设置高度、背景色
.cms-layout-header-categories-container {
  @apply h-12; //h-12==3rem
//   @apply py-2 text-lg h-12;

//   color: @cms-category-color;
  background: @cms-category-bg-color;
}

//设置menu组件中的背景颜色与栏目行颜色一致
.cms-layout-header-categories-menu {
  // @apply text-lg font-semibold;
  @apply text-lg font-bold h-12 pt-2; //设置line-heigth与cms-header-categories中相同

  font-family: 'Microsoft YaHei';
  color: @cms-category-color;
  background: @cms-category-bg-color;
  //阳宗海网站定义--导航菜单背景图片
  // background-image: url('/@/../images/menu-bg.png');
  // background-size: cover;
  //覆盖antd的默认演示，下划线
  border: none;
}

@media screen and (max-width:768px) {

  //设置menu组件中的背景颜色与栏目行颜色一致
  .cms-layout-header-categories-menu {
    // @apply text-lg font-semibold;
    @apply text-sm font-bold h-8 pt-2; //设置line-heigth与cms-header-categories中相同
  }

  .cms-layout-header-categories-container {
    @apply h-9; //h-12==3rem
  }
}
//设置cms显示栏目内容的行的样式，栏目内容的显示分为显示轮播图和显示子栏目2种
.cms-category-content-row,.cms-category-content-swipper-row{
  // @apply px-0 py-2 min-h-80 mx-0;
  //2023-10-20去掉min-h样式，让栏目高度根据内容自动
  @apply px-0 py-2 mx-0;

  //页面布局的中间有块白色背景，原因未知，暂时使用白色背景进行覆盖
  background: @cms-content-bg-color;
  //使用白色背景覆盖后a-row的样式中有左右外边距，在此进行覆盖；在此设置覆盖无效
  // margin-left: 0;
  // margin-right: 0;
}

//设置cms显示栏目内容（轮播图）行的样式，设置高度、溢出
.cms-layout-category-content-swipper-row {
  @apply h-80 leading-80 max-h-80 overflow-hidden px-0 py-2;

  // color: @cms-category-swipper-color;
  // background: @cms-category-swipper-bg-color;

  img {
    @apply h-full  overflow-hidden;
  }

  div {
    @apply h-full;
  }
}

//设置每个栏目的显示样式，包含栏目标题、栏目中的文章列表显示
.cms-category-container {
  @apply h-full overflow-hidden px-2 pb-2; //顶部边距已经在外层设置

  background: @cms-content-bg-color;

  div {
    @apply h-full;
  }

//栏目标题div
.category-title {
  @apply h-full px-2 align-middle;

  display: flex;
  flex-direction: row;
}

//栏目标题前导符，红色的竖线
.category-title-prefix {
  @apply h-full px-2 font-black; //font-black对应值为900，最大为1000

  color: @cms-category-title-prefix-color;
  // font-weight: 1000;
  position: relative; //显示图片需要设置position为relative
  
  img {
      content: url('/@/../images/category_prefix.png');
      object-fit: scale-down;
    }
}

//栏目标题文字
.category-title-text {
  // @apply h-full text-lg font-semibold;
  @apply h-full text-lg font-bold;

  color: @cms-category-title-text-color;
}

//栏目标题最后的查看更多
.category-title-more {
  @apply h-full text-xs;

  margin-left: auto;
}

//设置栏目文章标题样式，一个栏目中的文章列表（显示前导符、标题和日期），左对齐、自动换行、左右边距为0、上下内边距为0.25rem
.category-article-row {
  @apply text-left break-all px-0 py-1;
}

//栏目中文章列表的文章前导符，一个栏目中的文章列表前导符，顶部对齐（与文章标题垂直对齐一致）
.category-article-prefix {
  @apply text-base font-normal flex-shrink w-4 align-middle;

  //设置左右固定宽度，中间填满(使用flex)
  // width: 2rem;
  // flex-shrink: 0;
  //引导符、文章标题、日期设置水平对齐
    // vertical-align: top;
}

//栏目中文章列表的文章标题，一个栏目中的文章列表标题，左对齐、顶部对齐、文字自动换行
.category-article-title {
  @apply text-base font-normal text-left align-top flex-shrink-1 w-full cursor-pointer hover:underline;

  //设置左右固定宽度，中间填满(使用flex)
  // width: 100%;
  // flex-shrink: 1;
}

//栏目中文章列表的文章发布时间，一个栏目中的文章日期，右对齐、底部对齐、高度100%、宽度5rem
.category-article-time {
  @apply text-xs font-light text-right align-bottom flex-shrink h-full w-24;

  //设置左右固定宽度，中间填满(使用flex)
  // width: 5rem;
  // flex-shrink: 0;
}
}
.flexBox {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
//显示文章信息容器
.cms-article-container {
  @apply px-0 py-2 w-full;

  background: @cms-content-bg-color;

  .cms-article-title {
    @apply text-3xl leading-loose font-bold text-center;
  }

  .cms-article-subtitle {
    @apply text-sm font-normal text-center;
  }

  //文章内容显示容器样式，不应该设置任何样式，否则会覆盖文章中的内容样式
  .cms-article-content {
    // @apply text-base font-normal text-center;
  }
}

.cms-layout-footer-links {
  @apply text-base py-2;

  text-align: center;
  vertical-align: middle;
  color: @cms-footer-links-color;
  background: @cms-footer-links-bg-color;
}

.cms-layout-footer-copyright {
  @apply text-sm py-1;

  text-align: center;
  vertical-align: middle;
  color: @cms-footer-copyright-color;
  background: @cms-footer-copyright-bg-color;
}

.cms-article-nav {
  background-color: @cms-category-bg-color;
  opacity: 80%;
  box-shadow: 1px 2px 1px #dddcdc;

  h6 {
    display: inline;
    color: #fff;
    margin-left: 5px;
  }

  span {
    cursor: pointer;
    color: white;
    text-decoration: underline;
  }

  span:hover {
    cursor: pointer;
    color: rgb(9, 96, 189);
    text-decoration: underline;
  }
}

.cms-search-button {
  background-color: @cms-category-bg-color;
  // opacity: 80%;
  border-color: @cms-category-bg-color;
}
